<template>
  <!-- 抖音销量榜的时间组件 -->
  <div id="time_options">
    <radio_group01 v-model="value01" :radio_values="radio_values" />
    <el_select
      v-model="value02"
      class_name="time_options_select"
      :options="time_options"
      :disabled="true"
    />
    <div class="meng_div">{{ value02 }}</div>
  </div>
</template>

<script>
import radio_group01 from "./radio_group01";
import el_select from "./el_select";
export default {
  name: "time_options",
  components: {
    radio_group01,
    el_select
  },
  data() {
    return {
      value01: "日榜",  //日周月榜名称
      value02: "",  //下拉日期列表选中的值
      time_options: [], //下拉日期列表所有展示的日期集合
      isUpdate: false, //13:00后了
      isUpdate02: false, //14:00后了
      isUpdate03: false //14:00后了
    };
  },
  computed: {
    value01_value02() {
      return this.value01 + "?" + this.value02;
    }
  },
  model: {
    prop: "value",
    event: "returnBack"
  },
  props: ["value", "radio_values","timeData"],
  created: function() {
    this.value01 = this.value.split("?")[0];
    this.$watch("value01", function(newValue, oldValue) {
      // this.date_message();
      this.changeRank(1);
    });
    // this.$watch("value01_value02", function(newValue, oldValue) {
    //   this.changed();
    // });
    this.$watch("value02", function(newValue, oldValue) {
      this.changeRank();
      // this.value01 = this.value.split("?")[0];
    });
    this.changeRank(1);
    // this.date_message();
    // this.changed();
  },
  methods: {
    changeRank(isRankChecked){
      let that = this;
      let dayDataA = '';
      let dayDataB = '';
      let dayDataC = '';
      if(this.value01 == '日榜'){
        dayDataA = this.timeData[0];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.startTime, 'M月D日');
        });
      }else if(this.value01 == '周榜'){
        dayDataA = this.timeData[1];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD')+'-'+that.formatDateNew(item.endTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.startTime, 'M月D日')+'-'+that.timestamp(item.endTime, 'M月D日');
        });
      }else{
        dayDataA = this.timeData[2];  //原始时间戳集合 单位：秒
        dayDataB = dayDataA.map((item)=>{ //接口用的日期
          return that.formatDateNew(item.startTime*1000, 'YY-MM-DD')+'-'+that.formatDateNew(item.endTime*1000, 'YY-MM-DD');
        });
        dayDataC = dayDataA.map((item)=>{  //展示用的日期
          return that.timestamp(item.endTime, 'Y年M月');
        });
      }
      if(isRankChecked){  //每次切换日周月榜都重置默认选中值为对应的第一个值
        this.value02 = dayDataC[0];
      }
      this.time_options = dayDataC;
      this.$emit("returnBack", this.value01 + "?" + dayDataB[dayDataC.indexOf(this.value02)]);
    },
    //   格式化时间，提交到父组件
    changed() {
      let date;
      let year = new Date().getFullYear();
      switch (this.value01) {
        case "日榜":
          date = this.timestamp(this.value02.split("$")[1], "Y-M-D");
          break;
        case "周榜":
          date =
            this.timestamp(this.value02.split("$")[1].split("-")[0], "Y-M-D") +
            "-" +
            this.timestamp(this.value02.split("$")[1].split("-")[1], "Y-M-D");
          break;
        case "月榜":
          let time = new Date(
            this.timestamp(this.value02.split("$")[1], "Y-M-D")
          );
          let year = time.getFullYear();
          let month = time.getMonth() + 1;
          date =
            year +
            "-" +
            (month < 10 ? "0" + month : month) +
            "-01" +
            "-" +
            this.timestamp(this.value02.split("$")[1], "Y-M-D");
          break;
      }
      //   console.log('date', date)
      this.$emit("returnBack", this.value01 + "?" + date);
    },
    //根据日榜周榜月榜判断当前显示的时间
    date_message() {
      let d = new Date();
      let h = d.getHours();
      let today = d.getDate();
      // 日榜和周榜是13:00前 月榜是两点前
      // if (h >= 10) {
      //   this.isUpdate = true;
      // } else {
      //   this.isUpdate = false;
      // }
      this.isUpdate = false;
      
      // if (h >= 14) {
      //   this.isUpdate02 = true;
      // } else {
      //   this.isUpdate02 = false;
      // }
      let day = d.getDate(); //获取日
      let curTime = Date.now() / 1000;
      let oneTime = 24 * 60 * 60;
      let year = d.getFullYear();
      let month = d.getMonth();
      let week_day = d.getDay() == 0 ? 7 : d.getDay(); //返回星期几的某一天;


      this.isUpdate02 = (week_day > 2); //每周周二以后更新周榜
      this.isUpdate03 = (day > 2); //每月2号以后更新周榜

      switch (this.value01) {
        case "日榜":
          this.time_options.length = 0;
          // 是否到13:00 到了显示前一天 不到显示前两天
          if (this.isUpdate) {
            this.time_options.push(
              this.timestamp(curTime - oneTime * 1, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 1),
              this.timestamp(curTime - oneTime * 2, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 2),
              this.timestamp(curTime - oneTime * 3, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 3),
              this.timestamp(curTime - oneTime * 4, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 4),
              this.timestamp(curTime - oneTime * 5, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 5),
              this.timestamp(curTime - oneTime * 6, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 6),
              this.timestamp(curTime - oneTime * 7, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 7)
            );
          } else {
            this.time_options.push(
              this.timestamp(curTime - oneTime * 2, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 2),
              this.timestamp(curTime - oneTime * 3, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 3),
              this.timestamp(curTime - oneTime * 4, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 4),
              this.timestamp(curTime - oneTime * 5, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 5),
              this.timestamp(curTime - oneTime * 6, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 6),
              this.timestamp(curTime - oneTime * 7, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 7),
              this.timestamp(curTime - oneTime * 8, "M月D日") +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * 8)
            );
          }

          break;
        case "周榜":
          // 每周一13:00之前显示 当前周-2（即上上周）的数据，13:00之后显示 当前周-1（即上周）的数据 --- 旧逻辑  ，
          // 新逻辑为每月2号以后 > 2 更新周报, 即 >2 展示上上周日期区间
          // isUpdate true 13:00后
          this.time_options.length = 0;
          if (!this.isUpdate02) {
            this.time_options.push(
              this.timestamp(
                curTime - oneTime * (week_day + 7 * 1 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 1),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 1 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 1)),

              this.timestamp(
                curTime - oneTime * (week_day + 7 * 2 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 2),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 2 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 2)),

              this.timestamp(
                curTime - oneTime * (week_day + 7 * 3 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 3),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 3 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 3))
            );
          } else {
            this.time_options.push(
              this.timestamp(
                curTime - oneTime * (week_day + 7 * 0 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 0),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 0 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 0)),

              this.timestamp(
                curTime - oneTime * (week_day + 7 * 1 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 1),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 1 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 1)),

              this.timestamp(
                curTime - oneTime * (week_day + 7 * 2 + 6),
                "M月D日"
              ) +
                "-" +
                this.timestamp(
                  curTime - oneTime * (week_day + 7 * 2),
                  "M月D日"
                ) +
                "　　　　　　　　　　　$" +
                (curTime - oneTime * (week_day + 7 * 2 + 6)) +
                "-" +
                (curTime - oneTime * (week_day + 7 * 2))
            );
          }

          break;
        case "月榜":
          // 月榜：每月1号14:00之前显示 当前月-2（即上上月）的数据，14:00之后显示 当前月-1（即上月）的数据
          this.time_options.length = 0;
          if (!this.isUpdate03) {
            this.time_options.push(
              this.timestamp(
                new Date(year, month - 1, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 1, 0).getTime() / 1000,
              this.timestamp(
                new Date(year, month - 2, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 2, 0).getTime() / 1000,
              this.timestamp(
                new Date(year, month - 3, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 3, 0).getTime() / 1000
            );
          } else {
            this.time_options.push(
              this.timestamp(
                new Date(year, month - 0, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 0, 0).getTime() / 1000,
              this.timestamp(
                new Date(year, month - 1, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 1, 0).getTime() / 1000,
              this.timestamp(
                new Date(year, month - 2, 0).getTime() / 1000,
                "Y年M月"
              ) +
                "　　　　　　　　　　　$" +
                new Date(year, month - 2, 0).getTime() / 1000
            );
          }
          break;
      }
      this.value02 = this.time_options[0];
    }
  }
};
</script>
<style scoped lang="less">
.meng_div {
  position: absolute;
  top: 1px;
  // margin-left: -180px;
  right: 26px;
  white-space: nowrap;
  overflow: hidden;
  width: 155px;
  pointer-events: none;
  height: 30px;
  line-height: 30px;
  box-sizing: border-box;
  padding-left: 12px;
  background-color: #fff;
  font-size: 14px;
  color: #222;
}
#time_options {
  position: relative;
  > div {
    display: inline-block;
  }
  #el_select {
    display: inline-block;
  }
}
</style>
